<!-- 仓库设置 -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>仓库设置</title>
        <link href="../img/icon.ico" rel="shortcut icon"/>
		<link rel="stylesheet" href="../layui/css/layui.css" />
        <link rel="stylesheet" href="../css/element.min.css?1" />
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css">
        <link rel="stylesheet" href="../css/reset.css?3123">
        <link rel="stylesheet" href="../css/setlayui.css?12">
        <link rel="stylesheet" href="../css/viewer.min.css">
		<script src="../layui/layui.all.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript" src="../js/element.min.js"></script>
        <script src="../js/viewer.min.js"></script>
	</head>
	<body>
        <div id="app" class="page-container" style="display: none;" v-show="showApp">
            <div class="content_box">
                <div ref="tops">
                    <div class="cell_txt">工程编号<span>{{projectId}}</span></div>
                    <div class="cell_box">
                        <div class="cell_name">工程名称</div>
                        <div class="cell_cont">萧政工出[2019]33号萧山城区市北西单元03</div>
                    </div>
                    <div class="title_box">
                        <div class="title_name">仓库明细:</div>
                        <div class="title_but">
                            <el-button class="border_but" @click="addCkmx" type="primary">新增</el-button>
                        </div>
                    </div>
                </div>
                <div class="detail_box" ref="detailbox">
                    <div class="table_box border_table_box">
                        <el-table :data="ckmxTableData" height="100%" border style="width: 100%">
                            <el-table-column align="center" prop="imgId" width="50" show-overflow-tooltip label="序号"></el-table-column>
							<el-table-column prop="name" align="center" min-width="100" show-overflow-tooltip label="仓库名称"></el-table-column>
                            
                            <el-table-column prop="type" align="center" min-width="80" show-overflow-tooltip label="仓库类型">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.type == 1">室内</span>
                                    <span v-if="scope.row.type == 2">室外</span>
                                    <span v-if="scope.row.type == 3">临时</span>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="time" align="center" show-overflow-tooltip label="位置选点" width="100">
                                <template slot-scope="scope">
                                    <el-button v-if="scope.row.isspot == 0" @click="chioseSpot(scope.row)" class="border_but" style="height: 24px;margin: 0 auto;" type="primary">选择</el-button>
                                    <el-button v-if="scope.row.isspot == 1" @click="reselectSpot(scope.row)" class="border_but" style="height: 24px;margin: 0 auto;" type="primary">重选</el-button>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="name" align="center" show-overflow-tooltip label="货架" width="100">
                                <template slot-scope="scope">
                                    <el-button @click="hjEdit(scope.row)" v-if="scope.row.type == 1" class="border_but" style="height: 24px;margin: 0 auto;" type="primary">编辑</el-button>
                                    <span v-if="scope.row.type != 1" style="color:#999999;">不可编辑</span>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="creatername" align="center" show-overflow-tooltip label="创建人" min-width="70">
                            </el-table-column>

                            <el-table-column prop="addtime" align="center" show-overflow-tooltip label="创建时间" width="160">
                            </el-table-column>

                            <el-table-column prop="personinchargename" align="center" show-overflow-tooltip label="负责人" min-width="70">
                            </el-table-column>

                            <el-table-column prop="describe" align="center" show-overflow-tooltip label="备注" min-width="150">
                            </el-table-column>
                            <el-table-column prop="address" align="center" show-overflow-tooltip label="操作" width="106">
                                <template slot-scope="scope">
                                    <el-button @click="editCkmx(scope.row, scope.$index)" type="text">修改</el-button>
                                    <el-button @click="removeCkmx(scope.row, scope.$index)" v-if="scope.row.isAdd" type="text">删除</el-button>
                                </template>
                            </el-table-column>
						</el-table>
                    </div>
                    <div class="img_box">
                        <div class="file_but">
                            <el-upload
                                class="upload-demo"
                                action="##"
                                accept="image/*"
                                :show-file-list="false"
                                :http-request="httprequest">
                                <el-button v-if="!isupload" class="border_but" type="primary">上传图纸</el-button>
                                <el-button v-if="isupload" class="border_but" type="primary">重新上传图纸</el-button>
                            </el-upload>

                            <div class="icon_type_box">
                                <img src="../img/icon2.png" alt="">
                                <div>室内</div>
                                <img src="../img/icon3.png" alt="">
                                <div>室外</div>
                                <img src="../img/icon1.png" alt="">
                                <div>临时</div>
                            </div>
                        </div>
                        <div class="file_box">
                            <div class="file_cont" v-if="!isupload">
                                <el-upload
                                    class="file_upload-demo"
                                    drag
                                    action="##"
                                    accept="image/*"
                                    :show-file-list="false"
                                    :http-request="httprequest">
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">将图纸拖到此处，或<em>点击上传</em></div>
                                </el-upload>
                            </div>
                            <div class="img_scroll_box" v-if="isupload">
                                <img v-if="!fileData.fileurl" style="position: absolute; left: 50%;transform: translateX(-50%);width: 30px;" src="../img/loading.gif" alt="">
                                <div v-if="!fileData.fileurl" style="position: absolute; top: 76px;left: 50%;transform: translateX(-50%);">正在加载图纸</div>
                                <div class="img_cont" style="width: 100px;">
                                    <div class="img_contan" style="width: 100%;position: relative;" @click="imgSpotChiose">
                                        <img id="drawing" :src="fileData.fileurl" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            <div class="but_box">
				<el-button class="cancelClass" @click="cancels">取消</el-button>
				<el-button type="primary" @click="confirms" style="margin-left: 120px">提交</el-button>
            </div>
            <el-dialog
                :title="ckmxPopupTitle"
                :visible.sync="dialogVisible"
                custom-class="public_popup"
                width="60%">
                <div class="public_popup_box">
                    <div class="public_popup_cell_box">
                        <div class="popup_cell_item">
                            <div class="popup_cell_name must_input">仓库名称:</div>
                            <div class="popup_cell_cont">
                                <el-input
                                    placeholder="请输入内容"
                                    v-model="addCkObj.name"
                                    class="public_input"
                                    clearable>
                                </el-input>
                            </div>
                        </div>
                        <div class="popup_cell_item">
                            <div class="popup_cell_name must_input">仓库类型:</div>
                            <div class="popup_cell_cont">
                                <el-radio v-model="addCkObj.type" label="1">室内</el-radio>
                                <el-radio v-model="addCkObj.type" label="2">室外</el-radio>
                                <el-radio v-model="addCkObj.type" label="3">临时</el-radio>
                            </div>
                        </div>
                        <div class="popup_cell_item">
                            <div class="popup_cell_name must_input">负责人:</div>
                            <div class="popup_cell_cont">
                                <el-select @change="fzrChange" v-model="addCkObj.personinchargecode" class="public_input" clearable placeholder="请选择">
                                    <el-option
                                        v-for="item in fzrList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="popup_cell_item">
                            <div class="popup_cell_name">备注:</div>
                            <div class="popup_cell_cont">
                                <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="addCkObj.describe"></el-input>
                            </div>
                        </div>
                    </div>
                    <div class="but_box">
                        <el-button @click="dialogVisible = false" class="cancelClass">取消</el-button>
                        <el-button v-if="popupType == 'add'" @click="saveCkmx" type="primary" style="margin-left: 120px">提交</el-button>
                        <el-button v-if="popupType == 'edit'" @click="updateCkmx" type="primary" style="margin-left: 120px">提交</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
		<script src="../js/public.js?12345"></script>
		<script>
			var layer = layui.layer
			var vm = new Vue({
				el: '#app',
				data() {
					return {
                        ckmxPopupTitle: '新增仓库明细',
                        popupType: 'add',
                        addCkObj: {},
                        fzrList: [{
                            name: '张三',
                            id: '123456'
                        }],
                        editIndex: '',
                        dialogVisible: false,
                        showApp: false,
                        isupload: false,
                        isClick: false,
                        spotId: '',
                        spottype: '',
                        projectId: '',
                        ckmxTableData: [],
                        fileData: {
                            filename: '',
                            fileurl: '',
                        }
					};
				},
				methods: {
                    // 保存单挑仓库
                    saveDgCk (row) {
                        var that = this
                        xLoading(true, '正在提交')
                        $.ajax({
                            type: 'post',
                            headers: {
                            },
                            url: baseUrl + '/Material/SingleStorageDataManage',
                            data: {
                                projectId: that.projectId,
                                dataJson: JSON.stringify([row])
                            },
                            dataType: 'json',
                            success: function(res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                that.$message({
                                    message: '已提交',
                                    type: 'success'
                                });
                                row.isSaves = true
                                row.id = res.data
                                setTimeout(function () {
                                    parent.layer.open({
                                        type: 2,
                                        title: '编辑'+ row.name +'货架',
                                        shadeClose: true,
                                        shade: 0.4,
                                        skin: 'popup_layui',
                                        area: ['47.71%', '55.55%'],
                                        content: 'gcxx/editHj.html?storageId='+ res.data +'&projectId='+ that.projectId + '&ckName='+ encodeURIComponent(row.name) + '&' + new Date().getTime(),
                                        end: function() {
                                        }
                                    });
                                }, 500)
                            }
                        });
                    },
                    hjEdit (row) {
                        var that = this
                        if (row.isAdd && !row.isSaves) {
                            this.$confirm('编辑前需要保存仓库，是否保存仓库?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(function () {
                                that.saveDgCk(row)
                            }).catch(function () {
                            });
                            return false
                        }
                        parent.layer.open({
                            type: 2,
                            title: '编辑'+ row.name +'货架',
                            shadeClose: true,
                            shade: 0.4,
                            skin: 'popup_layui',
                            area: ['47.71%', '55.55%'],
                            content: 'gcxx/editHj.html?storageId='+ row.id +'&projectId='+ that.projectId + '&ckName='+ encodeURIComponent(row.name) + '&' + new Date().getTime(),
                            end: function() {
                            }
                        });
                    },
                    cancels () {
                        var that = this
                        this.$confirm('如果退出将删除所有数据，是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            setTimeout(function () {
                                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                parent.layer.close(index);
                            }, 100)
                        }).catch(function () {
                        });
                    },
                    confirms () {
                        var that = this
                        this.$confirm('保存后将无法删除数据?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            that.saveData()
                        }).catch(function () {
                        });
                    },
                    // 保存数据
                    saveData () {
                        var that = this
                        var dataJson = this.ckmxTableData
                        if (dataJson.length == 0) {
                            this.$message({
                                message: '请添加仓库',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        // if (that.fileData.fileid.length == 0) {
                        //     this.$message({
                        //         message: '请上传图纸',
                        //         type: 'warning',
                        //         duration: 1000
                        //     });
                        //     return false
                        // }
                        // for (var i = 0; i < this.ckmxTableData.length; i++) {
                        //     if (this.ckmxTableData[i].isspot == 0) {
                        //         this.$message({
                        //             message: '请选择仓库位置',
                        //             type: 'warning',
                        //             duration: 1000
                        //         });
                        //         return false
                        //     }
                        // }
                        xLoading(true, '正在提交')
                        $.ajax({
                            type: 'post',
                            headers: {
                            },
                            url: baseUrl + '/Material/StorageDataManage',
                            data: {
                                projectId: that.projectId,
                                mapId: that.fileData.fileid + ',' + that.fileData.filename,
                                dataJson: JSON.stringify(dataJson)
                            },
                            dataType: 'json',
                            success: function(res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                that.$message({
                                    message: '已提交',
                                    type: 'success'
                                });
                                setTimeout(function () {
                                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                    parent.layer.close(index);
                                }, 500)
                            }
                        });
                    },
                    fzrChange (val) {
                        for (var i = 0; i < this.fzrList.length; i++) {
                            if (val == this.fzrList[i].id) {
                                this.addCkObj.personinchargename = this.fzrList[i].name
                            }
                        }
                        this.$forceUpdate()
                    },
                    // 更新
                    updateCkmx () {
                        if (this.addCkObj.name.length == 0) {
                            this.$message({
                                message: '请输入仓库名称',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        if (this.addCkObj.personinchargename.length == 0) {
                            this.$message({
                                message: '请选择负责人',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        this.$set(this.ckmxTableData,this.editIndex, JSON.parse(JSON.stringify(this.addCkObj)))
                        this.dialogVisible = false
                        this.$forceUpdate()
                    },
                    // 保存仓库明细
                    saveCkmx () {
                        if (this.addCkObj.name.length == 0) {
                            this.$message({
                                message: '请输入仓库名称',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        if (this.addCkObj.personinchargename.length == 0) {
                            this.$message({
                                message: '请选择负责人',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        this.addCkObj.addtime = timeFormat(new Date(), 1)
                        if (this.ckmxTableData.length == 0) {
                            this.addCkObj.imgId = 1
                        } else {
                            this.addCkObj.imgId = this.ckmxTableData[this.ckmxTableData.length - 1].imgId + 1
                        }
                        this.ckmxTableData.push(this.addCkObj)
                        this.dialogVisible = false
                    },
                    // 删除
                    removeCkmx (row, index) {
                        var that = this
                        this.$confirm('此操作将删除此条数据, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            if (row.isSaves) {
                                row.oper = 'del'
                                xLoading(true, '正在删除')
                                $.ajax({
                                    type: 'post',
                                    headers: {
                                    },
                                    url: baseUrl + '/Material/StorageDataManage',
                                    data: {
                                        projectId: that.projectId,
                                        dataJson: JSON.stringify([row])
                                    },
                                    dataType: 'json',
                                    success: function(res) {
                                        xLoading(false)
                                        if (!res.success) {
                                            that.$message({
                                                message: res.msg ? res.msg : '程序错误，请重试',
                                                type: 'error'
                                            });
                                            return false;
                                        }
                                        that.$message({
                                            message: '已删除',
                                            type: 'success'
                                        });
                                        that.ckmxTableData.splice(index, 1)
                                    }
                                });
                            } else {
                                that.ckmxTableData.splice(index, 1)
                            }
                        }).catch(function () {
                        });
                    },
                    // 修改仓库明细
                    editCkmx (row, index) {
                        this.editIndex = index
                        this.addCkObj = JSON.parse(JSON.stringify(row))
                        if (!row.isAdd || row.isSaves) {
                            this.addCkObj.oper = 'update'
                        }
                        this.popupType = 'edit'
                        this.ckmxPopupTitle = '修改仓库明细'
                        this.dialogVisible = true
                    },
                    // 新增仓库明细
                    addCkmx () {
                        this.addCkObj = {
                            oper: 'add',
                            name: '',
                            type: '1',
                            isspot: 0,
                            pixelx: '',
                            pixely: '',
                            describe: '',
                            creatercode: '',
                            creatername: '',
                            personinchargecode: '',
                            personinchargename: '',
                            addtime: '',
                            isAdd: true,
                            projectid: this.projectId
                        }
                        this.popupType = 'add'
                        this.ckmxPopupTitle = '新增仓库明细'
                        this.dialogVisible = true
                    },
                    // 上传附件
                    httprequest (file) {
                        var that = this
                        if (getFileType(file.file.name) != 'IMG') {
                            this.$message({
                                message: '只能上传图片',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        xLoading(true, '正在上传')
                        var formData = new FormData();
						formData.append('files', file.file);
						$.ajax({
							type: 'post',
							url: baseUrl + '/Common/UploadFile?method=UploadFile&type=OSS',
							data: formData,
							dataType: 'json',
							contentType: false,
							processData: false,
							success: function(res) {
                                xLoading(false)
								if (!res.success) {
									that.$message({
										message: res.msg,
										type: 'error'
									});
									return false;
                                }
                                $('.img_contan>.img_icon').remove()
                                for (var i = 0; i < that.ckmxTableData.length; i++) {
                                    if (!that.ckmxTableData[i].isAdd) {
                                        that.ckmxTableData[i].oper = 'update'
                                    }
                                    that.ckmxTableData[i].pixelx = ''
                                    that.ckmxTableData[i].piexly = ''
                                    that.ckmxTableData[i].isspot = '0'
                                }
                                setTimeout(function () {
                                    that.isupload = true
                                    that.fileData = {
                                        fileid: res.data.fileId,
                                        filename: res.data.fileName,
                                        fileurl: '',
                                        uploadTime: res.data.uploadTime,
                                        userName: res.data.userName
                                    }
                                    var img = new Image();
                                    img.onload = function () {
                                        that.fileData.fileurl = img.src
                                    }
                                    img.src = res.data.ossUrl;
                                    that.setDrawimgBox(file.file)
                                }, 500);
							}
						});
                    },
                    setDrawimgBox (file, types) {
                        var that = this;
                        if (types == 1) {
                            var img = new Image();
                            img.onload = function() {
                                var widths = img.naturalWidth
                                var heights = img.naturalHeight
                                if (widths > $('.img_scroll_box').width()) {
                                    $('.img_cont').css('width', '100%')
                                } else {
                                    $('.img_cont').css('width', widths + 'px')
                                }
                            }
                            img.src = file;
                            return false
                        }
                        var fileReader = new FileReader();
                        fileReader.readAsDataURL(file); //根据图片路径读取图片
                        fileReader.onload = function(e) {
                            var base64 = this.result;
                            var img = new Image();
                            img.onload = function() {
                                var widths = img.naturalWidth
                                var heights = img.naturalHeight
                                if (widths > $('.img_scroll_box').width()) {
                                    $('.img_cont').css('width', '100%')
                                } else {
                                    $('.img_cont').css('width', widths + 'px')
                                }
                            }
                            img.src = base64;
                        }
                    },
                    // 选择位置
                    chioseSpot (row) {
                        var that = this
                        if (!this.fileData.fileurl) {
                            this.$message({
                                message: '请先上传图纸',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        this.$confirm('请在图纸上选择位置点', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            that.isClick = true
                            that.spotId = row.imgId
                            that.spottype = row.type
                        }).catch(function() {
                        });
                    },
                    // 重新选择位置
                    reselectSpot (row) {
                        var that = this
                        if (!this.fileData.fileurl) {
                            this.$message({
                                message: '请先上传图纸',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        this.$confirm('是否重新选择位置', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            that.spotId = row.imgId
                            that.spottype = row.type
                            that.isClick = true
                        }).catch(function() {
                        });
                        
                    },
                    // 在图纸上选择点
                    imgSpotChiose (e) {
                        if (!this.isClick) {
                            return false
                        }
                        this.isClick = false
                        var lefts = (e.offsetX / $('#drawing').width() * 100).toFixed(2)
                        var tops = (e.offsetY / $('#drawing').height() * 100).toFixed(2)
                        for (var i = 0; i < this.ckmxTableData.length; i++) {
                            if (this.ckmxTableData[i].imgId == this.spotId) {
                                this.ckmxTableData[i]['pixelx'] = lefts
                                this.ckmxTableData[i]['piexly'] = tops
                                this.ckmxTableData[i].isspot = 1
                            }
                            if (!this.ckmxTableData[i].isAdd) {
                                this.ckmxTableData[i].oper = 'update'
                            }
                        }
                        var list = this.ckmxTableData
                        $('.img_contan>.img_icon').remove()
                        for (var i = 0; i < list.length; i++) {
                            if (list[i].isspot == 1) {
                                var imgUrl = ''
                                if (list[i].type == 1) {
                                    imgUrl = '../img/icon2.png'
                                }
                                if (list[i].type == 2) {
                                    imgUrl = '../img/icon3.png'
                                }
                                if (list[i].type == 3) {
                                    imgUrl = '../img/icon1.png'
                                }
                                $('.img_contan').append('<div style="top: calc('+ list[i].piexly +'% - 40px);left: calc('+ list[i].pixelx +'% - 13px);" class="img_icon"><img src="'+ imgUrl +'" alt=""><div class="img_txt">'+ list[i].imgId +'</div></div>')
                            }
                        }
                        // var imgUrl = ''
                        // if (this.spottype == 1) {
                        //     imgUrl = '../img/icon2.png'
                        // }
                        // if (this.spottype == 2) {
                        //     imgUrl = '../img/icon3.png'
                        // }
                        // if (this.spottype == 3) {
                        //     imgUrl = '../img/icon1.png'
                        // }
                        // $('.img_cont').append('<div style="top: calc('+ tops +'% - 54px);left: calc('+ lefts +'% - 17px);" class="img_icon"><img src="'+ imgUrl +'" alt=""><div class="img_txt">'+ this.spotId +'</div></div>')
                    },
                    getCkmxList (files) {
                        var that = this
                        xLoading(true)
                        $.ajax({
                            type: 'post',
                            headers: {
                            },
                            url: baseUrl + '/Material/GetStorageInfos',
                            data: {
                                projectId: that.projectId,
                                isUse: '1'
                            },
                            dataType: 'json',
                            success: function(res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                setTimeout(function() {
                                    if (files.length > 0) {
                                        that.isupload = true
                                        that.fileData = {
                                            fileid: files.split(',')[0],
                                            filename: files.split(',')[1],
                                            fileurl: ''
                                        }
                                        var img = new Image();
                                        img.onload = function () {
                                            that.fileData.fileurl = img.src
                                            setTimeout(function () {
                                                for (var i = 0; i < res.data.length; i++) {
                                                    if (res.data[i].isspot == 1) {
                                                        var imgUrl = ''
                                                        if (res.data[i].type == 1) {
                                                            imgUrl = '../img/icon2.png'
                                                        }
                                                        if (res.data[i].type == 2) {
                                                            imgUrl = '../img/icon3.png'
                                                        }
                                                        if (res.data[i].type == 3) {
                                                            imgUrl = '../img/icon1.png'
                                                        }
                                                        $('.img_contan').append('<div style="top: calc('+ res.data[i].piexly +'% - 40px);left: calc('+ res.data[i].pixelx +'% - 13px);" class="img_icon"><img src="'+ imgUrl +'" alt=""><div class="img_txt">'+ res.data[i].imgId +'</div></div>')
                                                    }
                                                }
                                            }, 100);
                                        }
                                        img.src = baseUrl + '/DataInput/FileService?method=DownloadFile&fileid=' + files.split(',')[0];
                                        that.setDrawimgBox(img.src, 1)
                                    }
                                    for (var i = 0; i < res.data.length; i++) {
                                        res.data[i].imgId = i + 1
                                    }
                                    that.ckmxTableData = res.data

                                    
                                }, 500)
                            }
                        });
                    },
                    getCktzData () {
                        var that = this
                        xLoading(true)
                        $.ajax({
                            type: 'post',
                            headers: {
                            },
                            url: baseUrl + '/Material/GetProjectMapId',
                            data: {
                                projectId: that.projectId
                            },
                            dataType: 'json',
                            success: function(res) {
                                if (!res.success) {
                                    xLoading(false)
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                that.getCkmxList(res.data)
                            }
                        });
                    }
				},
				mounted() {
                    this.showApp = true;
                    var that = this
                    setTimeout(function() {
                        that.$refs.detailbox.style.height = 'calc(100% - '+ that.$refs.tops.offsetHeight +'px)'
                        that.$refs.detailbox.style.minHeight = '678px'
                    }, 10)
                    this.projectId = getQuerys('projectId')
                    this.getCktzData()
				}
			});
        </script>
	</body>
	<style>
        .content_box {
            padding: 2.77vh 2.08vw 4px;
            height: calc(100% - 70px);
            overflow: auto;
        }
        .but_box {
			display: flex;
			justify-content: center;
			height: 70px;
			padding-bottom: 20px;
			align-items: flex-end;
			background: #fafbfc;
			border-top: 1px solid #ebebeb;
		}
		.but_box .el-button {
			width: 120px;
			height: 32px;
			border-radius: 5px;
			padding: 0;
			margin: 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}
        .title_but {
			padding-left: 10px;
		}
		
        .cell_txt {
            color: #000000;
            font-weight: bold;
            line-height: 1;
        }
        .cell_txt span {
            padding-left: 10px;
        }
        .cell_box {
            display: flex;
            align-items: center;
            line-height: 1;
            margin-top: 2.77vh;
        }
        .cell_cont {
            margin-left: 10px;
            height: 32px;
            background: #E3E3E3;
            border: 1px solid #BBBBC5;
            border-radius: 5px;
            padding: 0 10px;
            display: flex;
            align-items: center;
        }
        .title_box {
            display: flex;
            align-items: center;
            margin-top: 2.77vh;
            padding-bottom: 10px;
        }
        .detail_box {
            border: 1px solid #EBEBEB;
            padding: 2.77vh 2.08vw 10px;
        }
        .img_box {
            height: calc(100% - 250px);
        }
        .table_box {
            height: 250px;
        }
        .file_but {
            padding-bottom: 10px;
            display: flex;
            justify-content: space-between;
        }
        .icon_type_box {
            display: flex;
            align-items: center;
        }
        .icon_type_box img {
            margin-left: 20px;
            width: 20px;
            height: 30px;
        }
        .icon_type_box div {
            margin-left: 8px;
        }
        .img_box {
            padding-top: 2.77vh;
        }
        .file_box {
            height: calc(100% - 42px);
            border: 1px dashed #D6D6D6;
            border-radius: 5px;
        }
        .img_scroll_box {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0);
            overflow: auto;
            position: relative;
        }
        .img_cont {
            position: relative;
            padding: 40px 14px 0;
        }
        .file_box .el-upload-dragger {
            border: none;
        }
        .file_cont {
            width: 100%;
            height: 100%;
        }
        .file_upload-demo {
            width: 100%;
            height: 100%;
        }
        .file_cont .el-upload {
            width: 100%;
            height: 100%;
        }
        .file_cont .el-upload-dragger {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .file_cont .el-upload-dragger .el-icon-upload {
            margin-top: 0;
        }

        .public_popup_box {
            height: 100%;
        }
        .public_popup_cell_box {
            padding: 2.77vh 2.08vw 0;
            height: calc(100% - 70px);
            overflow: auto;
        }
        .public_popup {
            height: 70vh;
        }
        .popup_cell_item {
            display: flex;
            margin-bottom: 20px;
        }
        .popup_cell_name {
            width: 100px;
            padding-right: 10px;
            text-align: right;
            line-height: 32px;
        }
        .popup_cell_cont {
            padding-right: 100px;
            display: flex;
            align-items: center;
            flex: 1;
        }
        .el-radio {
            margin-right: 1.56vw;
        }
        .img_icon {
            position: absolute;
            width: 26px;
            height: 40px;
        }
        .img_txt {
            position: absolute;
            left: 50%;
            
            transform: translateX(-50%);
            top: 4px;
        }
	</style>
</html>
